<!--
 * @Description: zzb
 * @Version: 0.0.1
 * @Autor: zzb
 * @Date: 2022-06-14 10:51:09
 * @LastEditors: zzb
 * @LastEditTime: 2022-07-30 18:18:41
-->
<template>
  <div class="home-container">
    <p style="text-align: center; fontsize: 30px; fontweight: 900; margin: 0">
      <font color="red"> {{ siteRow.name }}</font
      >信息更新统计
    </p>
    <PanelGroup @handleSetLineChartData="handleSetLineChartData"></PanelGroup>
    <p style="text-align: center; fontsize: 30px; fontweight: 900; margin: 0">
      近半年网站趋势展示
    </p>
    <div class="chart">
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <TopLevelChannel
              :height="'300px'"
              :chartData="topLevelChannelNum"
            />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <SubChannel :height="'300px'" :chartData="subChannelNum" />
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <TotalArticle :height="'300px'" :chartData="totalArticleNum" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <NewArticleNum :height="'300px'" :chartData="newArticleNum" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import PanelGroup from "./chart/PanelGroup.vue";

import TopLevelChannel from "./chart/TopLevelChannel";
import SubChannel from "./chart/SubChannel";
import TotalArticle from "./chart/TotalArticle";
import NewArticleNum from "./chart/NewArticleNum";

import {
  topLevelChannelNumChangeTrend,
  subChannelNumChangeTrend,
  totalArticleNumChangeTrend,
  newArticleNumChangeTrend,
} from "@/api/statistics/statistics";
export default {
  name: "Statistics_home",
  props: {
    siteRow: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  data() {
    return {
      topLevelChannelNum: {},
      subChannelNum: {},
      totalArticleNum: {},
      newArticleNum: {},
    };
  },

  components: {
    PanelGroup,
    TopLevelChannel,
    SubChannel,
    TotalArticle,
    NewArticleNum,
  },
  computed: {
    // 默认时间
    timeDefault() {
      let date = new Date();
      // 通过时间戳计算
      let defalutStartTime = date.getTime() - 7 * 24 * 3600 * 1000; // 转化为时间戳
      let defalutEndTime = date.getTime();
      let startDateNs = new Date(defalutEndTime);
      let endDateNs = new Date(defalutEndTime);
      // 月，日 不够10补0
      defalutStartTime =
        startDateNs.getFullYear() +
        "-" +
        (startDateNs.getMonth() + 1 >= 10
          ? startDateNs.getMonth() + 1
          : "0" + (startDateNs.getMonth() + 1)) +
        "-" +
        "01";
      defalutEndTime =
        endDateNs.getFullYear() +
        "-" +
        (endDateNs.getMonth() + 1 >= 10
          ? endDateNs.getMonth() + 1
          : "0" + (endDateNs.getMonth() + 1)) +
        "-" +
        (endDateNs.getDate() >= 10
          ? endDateNs.getDate()
          : "0" + endDateNs.getDate());
      return [defalutStartTime, defalutEndTime];
    },
  },

  mounted() {
    this.getList();
    this.$store.dispatch("statistics/setDateRange", this.timeDefault);
  },

  watch: {
    siteRow: {
      handler(newValue, oldValue) {
        this.getList();
      },
      deep: true,
    },
  },

  methods: {
    getList() {
      topLevelChannelNumChangeTrend({ siteId: this.siteRow.siteId }).then(
        (res) => {
          let obj = { month: [], num: [] };
          res.data.forEach((item) => {
            obj.month.push(item.month);
            obj.num.push(item.num);
          });
          this.topLevelChannelNum = obj;
        }
      );
      subChannelNumChangeTrend({ siteId: this.siteRow.siteId }).then((res) => {
        let obj = { month: [], num: [] };
        res.data.forEach((item) => {
          obj.month.push(item.month);
          obj.num.push(item.num);
        });
        this.subChannelNum = obj;
      });
      totalArticleNumChangeTrend({ siteId: this.siteRow.siteId }).then(
        (res) => {
          let obj = { month: [], num: [] };
          res.data.forEach((item) => {
            obj.month.push(item.month);
            obj.num.push(item.num);
          });
          this.totalArticleNum = obj;
        }
      );
      newArticleNumChangeTrend({ siteId: this.siteRow.siteId }).then((res) => {
        let obj = { month: [], num: [] };
        res.data.forEach((item) => {
          obj.month.push(item.month);
          obj.num.push(item.num);
        });
        this.newArticleNum = obj;
      });
    },
    handleSetLineChartData(component_name, activeTabName) {
      this.$emit("changeComponent", component_name, activeTabName);
    },
  },
};
</script>

<style scoped lang="scss">
.home-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: auto;
  .chart {
    flex: 1;
    display: flex;
    flex-direction: column;
    .el-row {
      flex: 1;
    }
  }
}
</style>
